<template>
	<view class="">
		<u-form-item label="爱车车型">
			<view class="u-flex" style="flex: 1; justify-content: flex-end" @click="show = true">
				<!-- <u--input
          :readonly="true"
          placeholder="请输入内容"
          inputAlign="right"
          border="none"
          v-model="showvalue"
        ></u--input> -->
				{{ showvalue || $z.$t("请选择车型") }}
				<u-icon name="arrow-right"></u-icon>
			</view>
		</u-form-item>
		<!-- #ifndef MP-WEIXIN -->
		<u-popup :show="show" @open="open" mode="right">
			<view>
				<u-navbarsearch height="80px" @leftClick="() => (show = false)" :autoBack="false">
					<template #center>
						<view style="width: 520rpx">
							<u-search shape="square" placeholder="输入爱车品牌" height="80rpx" v-model="ppvalue"
								:showAction="false"></u-search>
						</view>
					</template>
				</u-navbarsearch>
				<u-index-list :index-list="showindexList">
					<template v-for="(item, index) in showlist">
						<u-index-item>
							<u-index-anchor :text="showindexList[index]"></u-index-anchor>
							<view class="list-cell" :class="{ noafter: index == item.length - 1 }"
								v-for="(cell, index) in item" @click="setqcpp(cell)">
								<u--image :showLoading="true" :src="cell.pppic" width="60rpx" height="60rpx"
									mode="widthFix" style="margin-right: 20rpx" radius="20rpx"></u--image>
								{{ cell.qcpp }}
							</view>
						</u-index-item>
					</template>
				</u-index-list>
			</view>
		</u-popup>

		<u-popup :show="cxshow" @open="cxopen" mode="right">
			<view>
				<u-navbar :title="qcpp.qcpp" @leftClick="() => (cxshow = false)" :autoBack="false"></u-navbar>
				<view class="list-cell" v-for="(item, index) in cxlist" @click="setcx(item)">
					<u--image :showLoading="true" :src="item.cxpic" width="60rpx" height="60rpx" mode="widthFix"
						style="margin-right: 20rpx" radius="20rpx"></u--image>
					{{ item.cx }}
				</view>
			</view>
		</u-popup>
		<u-popup :show="jtpzshow" @open="jtpzopen" mode="right">
			<view>
				<u-navbar :title="cx.cx" @leftClick="() => (jtpzshow = false)" :autoBack="false"></u-navbar>
				<!-- CarConfigCxInfoSearch -->
				<view class="list-cell" v-for="(item, index) in jtpzlist" :key="index" @click="setjtpz(item)">
					<u--image :showLoading="true" :src="item.jtpzpic" width="60rpx" height="60rpx" mode="widthFix"
						style="margin-right: 20rpx" radius="20rpx"></u--image>
					{{ item.jtpz }}
					<!-- {{ item }} -->
				</view>
			</view>
		</u-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			valueqcpp: {
				type: String,
				default: () => {
					return "";
				},
			},
			valuecx: {
				type: String,
				default: () => {
					return "";
				},
			},
			valuejtpz: {
				type: String,
				default: () => {
					return "";
				},
			},
		},
		data() {
			return {
				show: false,
				cxshow: false,
				jtpzshow: false,

				list: [],
				cxlist: [],
				jtpzlist: [],
				qcpp: {},
				cx: {},
				jtpz: {},
				ppvalue: "",
			};
		},
		computed: {
			showvalue() {
				return `${this.valueqcpp || ""}${this.valuecx || ""}${
          this.valuejtpz || ""
        }`;
			},
			showlist() {
				let r = new Set();
				let list = this.list.filter((e) => {
					return e.qcpp.indexOf(this.ppvalue) > -1;
				});
				list.forEach((e) => {
					let p = e.szm;
					if (p.charCodeAt() < 65 || p.charCodeAt() > 90) {
						p = "#";
					}
					r.add(p);
				});
				// 更具首字母排序#在最后
				r = Array.from(r).sort((a, b) => {
					if (a === "#") {
						return 1;
					}
					if (b === "#") {
						return -1;
					}
					return a.charCodeAt() - b.charCodeAt();
				});
				let rlist = [];
				r.forEach((e) => {
					let p = list.filter((e1) => {
						if (e == "#") {
							return e1.szm.charCodeAt() < 65 || e1.szm.charCodeAt() > 90;
						}
						return e1.szm === e;
					});
					rlist.push(p);
				});
				console.log(rlist);
				// 把
				return rlist;
			},
			showindexList() {
				let indexList = [];
				this.showlist.forEach((e) => {
					if (e[0].szm.charCodeAt() < 65 || e[0].szm.charCodeAt() > 90) {
						indexList.push("#");
					} else {
						indexList.push(e[0].szm);
					}
				});

				return indexList;
			},
		},
		methods: {
			setqcpp(item) {
				this.qcpp = item;
				this.show = false;
				this.cxshow = true;
				this.$emit("update:valueqcpp", item.qcpp);
			},
			setcx(item) {
				this.cx = item;
				this.cxshow = false;
				this.jtpzshow = true;
				this.$emit("update:valuecx", item.cx);
			},
			setjtpz(item) {
				this.jtpz = item;
				this.jtpzshow = false;
				this.$emit("update:valuejtpz", item.jtpz);
			},
			async open() {
				let list = await this.$store.dispatch("request/getRequest", {
					url: "/CarConfigPpInfoSearch",
					data: {
						b_qy: "1",
					},
				});
				this.list = list.map((e) => {
					e.szm = e.ppszm.toUpperCase()[0] || "";
					return e;
				});
			},
			async cxopen() {
				let list = await this.$store.dispatch("request/getRequest", {
					url: "/CarConfigCxInfoSearch",
					data: {
						b_qy: "1",
						ppid: this.qcpp.id,
					},
				});
				this.cxlist = list;
			},
			async jtpzopen() {
				let list = await this.$store.dispatch("request/getRequest", {
					url: "/CarConfigZlInfoSearch",
					data: {
						b_qy: "1",
						cxid: this.cx.id,
					},
				});
				this.jtpzlist = list;
			},
		},
	};
</script>

<style lang="scss">
	.list-cell {
		height: 100rpx;
		display: flex;
		align-items: center;
		padding-left: 38rpx;
		position: relative;

		&::after {
			content: "";
			background-color: $u-border-color;
			height: 2rpx;
			transform: scaleY(50%);
			position: absolute;
			left: 34rpx;
			right: 0;
			bottom: 0;
		}

		&.noafter {
			&::after {
				display: none;
			}
		}
	}
</style>